<template>
    <div class="wrapper">
        <div class="topWrapper">
            <van-search v-model="headBankName" @search="getBankZh" placeholder="请输入搜索关键词" />
        </div>
        <div class="bottomWrapper">
            <empty v-if="!list.length"></empty>
            <van-pull-refresh v-model="refreshing" @refresh="getBankZh()">
                <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getBankZh">
                    <van-cell @click="chooseBank(item)" v-for="item in list" :key="item" :title="item.HEAD_BANK_NAME" />
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script setup name="bankList">
import { bankZh } from '@/api/service'

const router = useRouter()
const store = useStore()
const headBankName = ref('')
const loading = ref(false)
const refreshing = ref(false)
const finished = ref(false)
const list = ref([])
const getBankZh = () => {
    bankZh({
        headBankName: headBankName.value
    }).then(res => {
        list.value = res.object
        finished.value = true
        refreshing.value = false
    })
}
const chooseBank = item => {
    store.dispatch('data/GetBank', item)
    router.go(-1)
}
</script>

<style scoped lang="scss">
.wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;

    .bottomWrapper {
        flex: 1;
        overflow: scroll;
    }
}
</style>
